<template>
    <div class="wrapper">
        <el-row :gutter="20">
            <el-col :span="14">
                <div class="advertising">
                    <div class="share">
                        <div class="Lung">
                <span class="spn1">
                  <el-input v-model="subj" placeholder="请输入标题"></el-input>
                </span>
                        </div>
                    </div>
                    <div class="tabs">
                        <div class="label" :class="{'label_0': isA}" @click="ABOUT">关于</div>
                        <div class="label" :class="{'label_0': isB}" @click="SYMPTOMS">症状</div>
                        <div class="label" :class="{'label_0': isC}" @click="TREATMENTS">疗程</div>
                    </div>
                    <!--关于-->
                    <div v-show="isA" class="ABOUT">
                        <div>
                            <upload :echo="echo" @returnValue="returnValue1"></upload>
                        </div>
                        <div class="explain">
                          <span>
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="说明"
                                v-model="define"></el-input>
                          </span>
                        </div>
                        <div class="Common">
                            <div class="Common_c">共同</div>
                        </div>
                        <div class="UtTKTd">
                            <el-checkbox v-model="cure">是否由专业人员治疗</el-checkbox>
                            <el-checkbox v-model="diagnose">是否需要医学诊断</el-checkbox>
                            <el-checkbox v-model="imaging">是否需要检测或成像</el-checkbox>
                            <el-checkbox v-model="illness">是否是慢性疾病</el-checkbox>
                        </div>
                        <div class="yfM7Gf">
                            <VueUeditorWrap v-model="msg" :config="myConfig"></VueUeditorWrap>
                        </div>
                        <div class="K9xsvf">
                            <div class="CTannb">年龄受到影响</div>
                            <div class="receive">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <div>
                                            <span class="age">0-2:</span>
                                            <el-input v-model="age1"
                                                      style="display: inline-block;width: 150px"></el-input>
                                        </div>
                                        <div>
                                            <span class="age">6-13:</span>
                                            <el-input v-model="age3"
                                                      style="display: inline-block;width: 150px"></el-input>
                                        </div>
                                        <div>
                                            <span class="age">19-40:</span>
                                            <el-input v-model="age5"
                                                      style="display: inline-block;width: 150px"></el-input>
                                        </div>
                                        <div>
                                            <span class="age">60+:</span>
                                            <el-input v-model="age7"
                                                      style="display: inline-block;width: 150px"></el-input>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div>
                                            <span class="age">3-5:</span>
                                            <el-input v-model="age2"
                                                      style="display: inline-block;width: 150px"></el-input>
                                        </div>
                                        <div>
                                            <span class="age">14-18:</span>
                                            <el-input v-model="age4"
                                                      style="display: inline-block;width: 150px"></el-input>
                                        </div>
                                        <div>
                                            <span class="age">41-60:</span>
                                            <el-input v-model="age6"
                                                      style="display: inline-block;width: 150px"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div class="K9xsvf">
                            来源：
                            <el-input v-model="source" placeholder="请输入来源" class="handle-input"></el-input>
                        </div>
                    </div>
                    <!--症状-->
                    <div v-show="isB" class="SYMPTOMS">
                        <div>
                            <div class="MqFglb">
                                <span>医学症状</span>
                            </div>
                            <div class="K9xsvf">
                                <span>
                                  <el-input
                                      type="textarea"
                                      :rows="2"
                                      placeholder="说明"
                                      v-model="Typical_symptoms"></el-input>
                                </span>
                            </div>
                        </div>
                        <div class="SwqzDd">
                            <VueUeditorWrap v-model="msg1" :config="myConfig1"></VueUeditorWrap>
                        </div>
                        <div class="K9xsvf">
                            来源：
                            <el-input v-model="source1" placeholder="请输入来源" class="handle-input"></el-input>
                        </div>
                    </div>
                    <!--疗程-->
                    <div v-show="isC" class="TREATMENTS">
                        <div class="stage">
                            <div class="cure">治疗取决于阶段</div>
                            <div class="hui">治疗方法个不同，但可能包括手术，化疗，放射治疗，靶向药物治疗和免疫治疗。</div>
                        </div>
                        <div class="stage">
                            <div class="cure">自我护理 <i class="el-icon-arrow-down" style="float: right"></i></div>
                            <div class="hui">戒烟</div>
                        </div>
                        <div class="stage">
                            <div class="cure">药物 <i class="el-icon-arrow-down" style="float: right"></i></div>
                            <div class="hui">化疗，靶向药物治疗和免疫治疗。</div>
                        </div>
                        <div class="stage">
                            <div class="cure">专家 <i class="el-icon-arrow-down" style="float: right"></i></div>
                            <div style="height: 50px"></div>
                        </div>
                        <div class="stage">
                            <div class="cure" style="display: inline-block">来源：</div>
                            <div class="hui" style="display: inline-block">慢性阻塞性肺疾病基层诊疗指南 (实践版·2018)</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="9" :offset="1">
                <div>
                    <div class="advertising">
                        <div class="share">
                            <div class="Lung">
                                <span class="spn1">{{subj}}</span>
                            </div>
                        </div>
                        <div class="tabs">
                            <div class="label" :class="{'label_0': isA}" @click="ABOUT">关于</div>
                            <div class="label" :class="{'label_0': isB}" @click="SYMPTOMS">症状</div>
                            <div class="label" :class="{'label_0': isC}" @click="TREATMENTS">疗程</div>
                        </div>
                        <!--关于-->
                        <div v-show="isA" class="ABOUT">
                            <div class="img">
                                <img :src="picture" v-if="picture" height="280" width="100%"/>
                            </div>
                            <div class="explain">
                                <span>{{define}}</span>
                            </div>
                            <div class="Common">
                                <div class="Common_c">共同</div>
                            </div>
                            <div class="UtTKTd">
                                <div v-show="cure">
                                    <img style="vertical-align: middle;" src="../../../static/img1/药瓶.png" height="20"
                                         width="20"/>
                                    <span class="S1C7Re">可由医疗专业人员治疗</span>
                                </div>
                                <div v-show="diagnose">
                                    <img style="vertical-align: middle;" src="../../../static/img1/本子.png" height="20"
                                         width="20"/>
                                    <span class="S1C7Re">需要医学症状</span>
                                </div>
                                <div v-show="imaging">
                                    <img style="vertical-align: middle;" src="../../../static/img1/心电图.png" height="20"
                                         width="20"/>
                                    <span class="S1C7Re">通常需要实验室测试或成像</span>
                                </div>
                                <div v-show="illness">
                                    <img style="vertical-align: middle;" src="../../../static/img1/时钟.png" height="20"
                                         width="20"/>
                                    <span class="S1C7Re">慢性：可持续数年或终生</span>
                                </div>
                            </div>
                            <div class="yfM7Gf" v-html="msg"></div>
                            <div class="K9xsvf">
                                <div class="CTannb">年龄受到影响</div>
                                <div>
                                    <table class="dkJQbe">
                                        <tbody>
                                        <tr>
                                            <td class="Y77G4d">0-2:</td>
                                            <td>
                                                <div style="width: 0%" id="nianling1"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="Y77G4d">3-5:</td>
                                            <td>
                                                <div style="width: 0%" id="nianling2"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="Y77G4d">6-13:</td>
                                            <td>
                                                <div style="width: 0%" id="nianling3"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="Y77G4d">14-18:</td>
                                            <td>
                                                <div style="width: 0%" id="nianling4"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="Y77G4d">19-40:</td>
                                            <td>
                                                <div style="width: 0%" id="nianling5"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="Y77G4d">41-60:</td>
                                            <td>
                                                <div style="width: 0%" id="nianling6"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="Y77G4d">60+:</td>
                                            <td>
                                                <div style="width: 0%" id="nianling7"></div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="K9xsvf">来源：{{source}}</div>
                        </div>
                        <!--症状-->
                        <div v-show="isB" class="SYMPTOMS">
                            <div>
                                <div class="MqFglb">
                                    <span>医学症状</span>
                                </div>
                                <div class="K9xsvf">
                                    <span>{{Typical_symptoms}}</span>
                                </div>
                            </div>
                            <div class="SwqzDd" v-html="msg1"></div>
                            <div class="K9xsvf">来源：{{source1}}</div>
                        </div>
                        <!--疗程-->
                        <div v-show="isC" class="TREATMENTS">
                            <div class="stage">
                                <div class="cure">治疗取决于阶段</div>
                                <div class="hui">治疗方法个不同，但可能包括手术，化疗，放射治疗，靶向药物治疗和免疫治疗。</div>
                            </div>
                            <div class="stage">
                                <div class="cure">自我护理 <i class="el-icon-arrow-down" style="float: right"></i></div>
                                <div class="hui">戒烟</div>
                            </div>
                            <div class="stage">
                                <div class="cure">药物 <i class="el-icon-arrow-down" style="float: right"></i></div>
                                <div class="hui">化疗，靶向药物治疗和免疫治疗。</div>
                            </div>
                            <div class="stage">
                                <div class="cure">专家 <i class="el-icon-arrow-down" style="float: right"></i></div>
                                <div style="height: 50px"></div>
                            </div>
                            <div class="stage">
                                <div class="cure" style="display: inline-block">来源：</div>
                                <div class="hui" style="display: inline-block">慢性阻塞性肺疾病基层诊疗指南 (实践版·2018)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div style="padding: 10px 0 0 0;text-align: center">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button type="danger" @click="empty">清空</el-button>
        </div>
    </div>
</template>

<script>
    import VueUeditorWrap from 'vue-ueditor-wrap'
    import upload from './upload.vue';

    export default {
        components: {VueUeditorWrap, upload},
        data() {
            return {
                /*tabs切换*/
                isA: true,
                isB: false,
                isC: false,
                /*标题*/
                subj: '',
                /*上传图片*/
                echo: '',
                picture: '',
                /*说明*/
                define: '',
                Typical_symptoms: '',
                /*共同*/
                cure: true,
                diagnose: true,
                imaging: true,
                illness: true,
                /*富文本编辑器*/
                msg: '',
                myConfig: {
                    UEDITOR_HOME_URL: './static/ue/',
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 200,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 关闭自动保存
                    enableAutoSave: false,
                    /*字符限制*/
                    maximumWords: 350,
                },
                msg1: '',
                myConfig1: {
                    UEDITOR_HOME_URL: './static/ue/',
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 200,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 关闭自动保存
                    enableAutoSave: false,
                    /*字符限制*/
                    maximumWords: 400,
                },
                /*年龄受到影响*/
                age1: '',
                age2: '',
                age3: '',
                age4: '',
                age5: '',
                age6: '',
                age7: '',
                /*来源*/
                source: '',
                source1: '',
                source2: '',
            }
        },
        watch: {
            age1: (age1) => {
                if (age1) {
                    if (age1 <= 30) {
                        document.getElementById("nianling1").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
                        document.getElementById("nianling1").style.width = age1 + '%';
                    } else if (age1 > 30 && age1 <= 60) {
                        document.getElementById("nianling1").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
                        document.getElementById("nianling1").style.width = age1 + '%';
                    } else if (age1 > 60 && age1 <= 100) {
                        document.getElementById("nianling1").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
                        document.getElementById("nianling1").style.width = age1 + '%';
                    } else if (age1 > 100) {
                        document.getElementById("nianling1").style.width = 100 + '%';
                    }
                }
            },
            age2: (age2) => {
                if (age2) {
                    if (age2 <= 30) {
                        document.getElementById("nianling2").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
                        document.getElementById("nianling2").style.width = age2 + '%';
                    } else if (age2 > 30 && age2 <= 60) {
                        document.getElementById("nianling2").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
                        document.getElementById("nianling2").style.width = age2 + '%';
                    } else if (age2 > 60 && age2 <= 100) {
                        document.getElementById("nianling2").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
                        document.getElementById("nianling2").style.width = age2 + '%';
                    } else if (age2 > 100) {
                        document.getElementById("nianling2").style.width = 100 + '%';
                    }
                }
            },
            age3: (age3) => {
                if (age3) {
                    if (age3 <= 30) {
                        document.getElementById("nianling3").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
                        document.getElementById("nianling3").style.width = age3 + '%';
                    } else if (age3 > 30 && age3 <= 60) {
                        document.getElementById("nianling3").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
                        document.getElementById("nianling3").style.width = age3 + '%';
                    } else if (age3 > 60 && age3 <= 100) {
                        document.getElementById("nianling3").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
                        document.getElementById("nianling3").style.width = age3 + '%';
                    } else if (age3 > 100) {
                        document.getElementById("nianling3").style.width = 100 + '%';
                    }
                }
            },
            age4: (age4) => {
                if (age4) {
                    if (age4 <= 30) {
                        document.getElementById("nianling4").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
                        document.getElementById("nianling4").style.width = age4 + '%';
                    } else if (age4 > 30 && age4 <= 60) {
                        document.getElementById("nianling4").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
                        document.getElementById("nianling4").style.width = age4 + '%';
                    } else if (age4 > 60 && age4 <= 100) {
                        document.getElementById("nianling4").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
                        document.getElementById("nianling4").style.width = age4 + '%';
                    } else if (age4 > 100) {
                        document.getElementById("nianling4").style.width = 100 + '%';
                    }
                }
            },
            age5: (age5) => {
                if (age5) {
                    if (age5 <= 30) {
                        document.getElementById("nianling5").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
                        document.getElementById("nianling5").style.width = age5 + '%';
                    } else if (age5 > 30 && age5 <= 60) {
                        document.getElementById("nianling5").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
                        document.getElementById("nianling5").style.width = age5 + '%';
                    } else if (age5 > 60 && age5 <= 100) {
                        document.getElementById("nianling5").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
                        document.getElementById("nianling5").style.width = age5 + '%';
                    } else if (age5 > 100) {
                        document.getElementById("nianling5").style.width = 100 + '%';
                    }
                }
            },
            age6: (age6) => {
                if (age6) {
                    if (age6 <= 30) {
                        document.getElementById("nianling6").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
                        document.getElementById("nianling6").style.width = age6 + '%';
                    } else if (age6 > 30 && age6 <= 60) {
                        document.getElementById("nianling6").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
                        document.getElementById("nianling6").style.width = age6 + '%';
                    } else if (age6 > 60 && age6 <= 100) {
                        document.getElementById("nianling6").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
                        document.getElementById("nianling6").style.width = age6 + '%';
                    } else if (age6 > 100) {
                        document.getElementById("nianling6").style.width = 100 + '%';
                    }
                }
            },
            age7: (age7) => {
                if (age7) {
                    if (age7 <= 30) {
                        document.getElementById("nianling7").style.backgroundColor = 'rgba(0, 172, 193, 0.3)';
                        document.getElementById("nianling7").style.width = age7 + '%';
                    } else if (age7 > 30 && age7 <= 60) {
                        document.getElementById("nianling7").style.backgroundColor = 'rgba(0, 172, 193, 0.5)';
                        document.getElementById("nianling7").style.width = age7 + '%';
                    } else if (age7 > 60 && age7 <= 100) {
                        document.getElementById("nianling7").style.backgroundColor = 'rgba(0, 172, 193, 0.7)';
                        document.getElementById("nianling7").style.width = age7 + '%';
                    } else if (age7 > 100) {
                        document.getElementById("nianling7").style.width = 100 + '%';
                    }
                }
            },
        },
        methods: {
            ABOUT() {
                this.isA = true;
                this.isB = false;
                this.isC = false;
            },
            SYMPTOMS() {
                this.isA = false;
                this.isB = true;
                this.isC = false;
            },
            TREATMENTS() {
                this.isA = false;
                this.isB = false;
                this.isC = true;
            },
            /*上传图片*/
            returnValue1(data) {
                this.echo = '';
                this.picture = data
            },
            /*提交*/
            submit() {
                let obj = {
                    subj: this.subj,
                    img: this.picture,
                    about: [{
                        define: this.define,
                        common: {
                            medical_icon: [
                                {
                                    is_professional: '',
                                    is_medical_clinical: '',
                                    is_test: '',
                                    is_Chronic: '',
                                }
                            ],
                            cause: this.msg,
                            age: {
                                one: this.age1,
                                two: this.age2,
                                three: this.age3,
                                four: this.age4,
                                five: this.age5,
                                six: this.age6,
                                seven: this.age7,
                            },
                            source: this.source,
                        }
                    }],
                    symptoms: {
                        Typical_symptoms: this.Typical_symptoms,
                        Diagnostic_criteria: this.msg1,
                        source: this.source1,
                    },
                    treatments: {
                        source: this.source2,
                    },
                };
                if (this.cure == false) {
                    obj.about[0].common.medical_icon[0].is_professional = '0'
                } else {
                    obj.about[0].common.medical_icon[0].is_professional = '1'
                }
                if (this.diagnose == false) {
                    obj.about[0].common.medical_icon[0].is_medical_clinical = '0'
                } else {
                    obj.about[0].common.medical_icon[0].is_medical_clinical = '1'
                }
                if (this.imaging == false) {
                    obj.about[0].common.medical_icon[0].is_test = '0'
                } else {
                    obj.about[0].common.medical_icon[0].is_test = '1'
                }
                if (this.illness == false) {
                    obj.about[0].common.medical_icon[0].is_Chronic = '0'
                } else {
                    obj.about[0].common.medical_icon[0].is_Chronic = '1'
                }

                this.POST('http://47.104.101.207:8080/atlas/save', obj)

            },
            /*POST请求*/
            POST(Url, Obj) {
                this.$axios({
                    method: 'POST',
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    url: Url,
                    data: JSON.stringify(Obj),
                }).then((res) => {
                    if (res.data) {
                        this.$message.success('添加成功！');
                    }
                })
            },
            /*清空*/
            empty() {
                this.subj = '';
                this.picture = '';
                this.define = '';
                this.Typical_symptoms = '';
                this.cure = true;
                this.diagnose = true;
                this.imaging = true;
                this.illness = true;
                this.msg = '';
                this.msg1 = '';
                this.age1 = '';
                this.age2 = '';
                this.age3 = '';
                this.age4 = '';
                this.age5 = '';
                this.age6 = '';
                this.age7 = '';
                this.source = '';
                this.source1 = '';
                this.source2 = '';
            },
        },
    }
</script>

<style scoped>
    .wrapper {
        width: 1300px;
        min-height: 1000px;
        margin: 0 auto;
        padding: 50px 0;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .handle-input {
        width: 400px;
        display: inline-block;
    }

    /*左侧*/
    .advertising .share {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: #00ACC1;
        min-height: 64px;
    }

    .advertising .share .Lung {
        padding: 12px 16px;
        height: 100%;
    }

    .advertising .share .Lung .spn1 {
        font-size: 24px;
        line-height: 1.4;
        color: #FFF;
    }

    /*tabs标签*/
    .advertising .tabs {
        background-color: #0093A3;
        display: block;
        overflow: hidden;
        margin: 0;
    }

    .advertising .tabs .label {
        width: 32.5%;
        display: inline-block;
        text-align: center;
        font-size: 12px;
        padding-top: 15px;
        padding-bottom: 12px;
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.70);
    }

    .advertising .tabs .label_0 {
        border-bottom: 4px solid;
        border-bottom-color: #FEEA3D;
        color: #FEEA3D;
    }

    /*关于*/
    .advertising .ABOUT {
        border: 1px solid #ebebeb;
        border-radius: 5px;
    }

    .advertising .ABOUT .explain {
        padding: 16px;
        border-bottom: 1px solid #ebebeb;
    }

    .advertising .ABOUT .Common {
        padding: 18px 16px 10px;
    }

    .advertising .ABOUT .Common_c {
        font-size: large;
        color: rgba(0, 172, 193, 1);
        padding-bottom: 4px;
        font-weight: bold;
    }

    .advertising .ABOUT .UtTKTd {
        padding: 0 16px 10px;
    }

    .advertising .ABOUT .UtTKTd div {
        padding-top: 8px;
    }

    .advertising .ABOUT .UtTKTd .S1C7Re {
        padding-top: 8px;
        margin-left: 18px;
    }

    .advertising .ABOUT .yfM7Gf {
        padding: 1px 16px 8px;
        line-height: 1.4;
    }

    .advertising .ABOUT .yfM7Gf .V7ewqe {
        padding-bottom: 8px;
    }

    .advertising .ABOUT .K9xsvf {
        padding: 0 16px;
    }

    .advertising .ABOUT .K9xsvf .CTannb {
        padding-bottom: 10px;
        padding-top: 18px;
        font-size: large;
        color: rgba(0, 172, 193, 1);
        font-weight: bold;
    }

    .advertising .ABOUT .K9xsvf .dkJQbe {
        border-spacing: 0;
        width: 100%;
        padding-bottom: 12px;
    }

    .advertising .ABOUT .K9xsvf .dkJQbe td:first-child {
        height: 20px;
        line-height: 20px;
        width: 48px;
    }

    .advertising .ABOUT .K9xsvf .dkJQbe td:last-child div {
        height: 20px;
    }

    .advertising .ABOUT .K9xsvf .dkJQbe td {
        padding-top: 2px;
        padding-bottom: 0;
    }

    .advertising .ABOUT .K9xsvf .Y77G4d {
        color: rgba(0, 0, 0, .87);
    }

    .advertising .ABOUT .K9xsvf .dkJQbe .XXMfyd {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .advertising .ABOUT .K9xsvf .dkJQbe .Nl4tp {
        background-color: rgba(0, 172, 193, 0.3);
        width: 0%;
    }

    .advertising .ABOUT .K9xsvf .dkJQbe .hcd6lc {
        background-color: rgba(0, 172, 193, 0.5);
        width: 0%;
    }

    .advertising .ABOUT .K9xsvf .dkJQbe .KXQDpb {
        background-color: rgba(0, 172, 193, 0.7);
        width: 0%;
    }

    .advertising .ABOUT .EwuLE {
        padding: 0 16px;
    }

    .advertising .ABOUT .K9xsvf {
        padding: 5px 16px 12px;
    }

    .receive div {
        padding: 3px 0;
    }

    .age {
        display: inline-block;
        width: 50px;
    }

    /*症状*/
    .advertising .SYMPTOMS {
        border: 1px solid #ebebeb;
        border-radius: 5px;
    }

    .advertising .SYMPTOMS .MqFglb {
        font-weight: bold;
        padding: 18px 16px 4px;

        font-size: large;
        color: rgba(0, 172, 193, 1);
        font-weight: bold;

    }

    .advertising .SYMPTOMS .K9xsvf {
        line-height: 1.4;
        padding: 0 16px 16px 16px;
    }

    .advertising .SYMPTOMS .SwqzDd {
        border-top: 1px solid #ebebeb;
        padding: 18px 16px 12px;
    }

    .advertising .SYMPTOMS .SwqzDd .zu8hme {
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, .87);
        padding-bottom: 5px;
    }

    .advertising .SYMPTOMS .SwqzDd .BWsxhd {
        line-height: 1.4;
        padding-bottom: 8px;
    }

    .advertising .SYMPTOMS .EwuLE {
        padding: 0 16px;
    }

    .advertising .SYMPTOMS .K9xsvf {
        padding: 5px 16px 12px;
    }

    /*疗程*/
    .advertising .TREATMENTS {
        border: 1px solid #ebebeb;
        border-radius: 5px;
    }

    .advertising .TREATMENTS .stage {
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #ebebeb;
    }

    .advertising .TREATMENTS .stage .cure {
        font-weight: bold;
        margin-bottom: 2px;
    }

    .advertising .TREATMENTS .stage .hui {
        color: #939497;
    }
</style>
<style>
    html, body, #app {
        width: 100%;
        height: 100%;
        overflow: auto;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }
</style>
